import S2Chart from './S2Chart'
import emptyUrl from '@/assets/images/empty-chart/table.png'

const borderOptions = {
  style: {
    type: 'select',
    label: '样式',
    layout: 'vertical',
    defaultValue: 'solid',
    options: [
      { icon: 'icon-line-solid', value: 'solid' },
      { icon: 'icon-line-dashed', value: 'dashed' },
      { icon: 'icon-line-dotted', value: 'dotted' }
    ]
  },
  color: {
    type: 'colorPicker',
    label: '颜色',
    layout: 'vertical',
    defaultValue: '#e9ecf0'
  },
  width: {
    type: 'inputNumber',
    label: '粗细',
    layout: 'vertical',
    defaultValue: 1,
    options: {
      max: 3,
      min: 0
    }
  }
}

const fixed = {
  type: 'select',
  label: '左起列',
  layout: 'vertical',
  defaultValue: 1,
  options: [
    { label: '0', value: 0 },
    { label: '1', value: 1 },
    { label: '2', value: 2 },
    { label: '3', value: 3 },
    { label: '4', value: 4 },
    { label: '5', value: 5 },
    { label: '6', value: 6 }
  ]
}

export default {
  label: '交叉表',
  icon: 'icon-table',
  emptyUrl,
  Chart: S2Chart,
  requestFields: {
    row: {
      label: '行',
      required: true
    },
    col: {
      label: '列',
      required: true
    }
  },
  configs: {
    chart: {
      label: '图表',
      options: {
        borderEnabled: {
          type: 'checkbox',
          title: '显示外边框',
          defaultValue: true
        },
        border: {
          when: (v) => v.borderEnabled,
          type: 'object',
          label: '外边框',
          layout: 'inline',
          options: borderOptions
        },
        topRow: {
          type: 'object',
          layout: 'inline',
          offset: 0,
          options: {
            enabled: {
              type: 'checkbox',
              title: '首行背景填充',
              defaultValue: true
            },
            color: {
              when: (v) => v.enabled,
              type: 'colorPicker',
              defaultValue: '#f5f7fa'
            }
          }
        },
        topCol: {
          type: 'object',
          layout: 'inline',
          offset: 0,
          options: {
            enabled: {
              type: 'checkbox',
              title: '首列背景填充',
              defaultValue: false
            },
            color: {
              when: (v) => v.enabled,
              type: 'colorPicker',
              defaultValue: '#f5f7fa'
            }
          }
        },
        gridEnabled: {
          type: 'checkbox',
          title: '显示网格线',
          defaultValue: true
        },
        grid: {
          when: (v) => v.gridEnabled,
          type: 'object',
          label: '网格线',
          layout: 'inline',
          options: {
            style: {
              type: 'select',
              label: '样式',
              layout: 'horizontal',
              defaultValue: 'grid',
              options: [
                { icon: 'icon-line-horizontal', value: 'horizontal' },
                { icon: 'icon-line-vertical', value: 'vertical' },
                { icon: 'icon-line-grid', value: 'grid' }
              ]
            },
            color: {
              type: 'colorPicker',
              label: '颜色',
              layout: 'vertical',
              defaultValue: '#e9ecf0'
            }
          }
        },
        stripe: {
          type: 'object',
          layout: 'inline',
          offset: 0,
          options: {
            enabled: {
              type: 'checkbox',
              title: '显示斑马线',
              defaultValue: true
            },
            color: {
              when: (v) => v.enabled,
              type: 'colorPicker',
              defaultValue: '#f5f7fa'
            }
          }
        },
        indexEnabled: {
          type: 'checkbox',
          title: '显示序号',
          defaultValue: true
        },
        indexName: {
          when: (v) => v.indexEnabled,
          offset: 1,
          type: 'input',
          defaultValue: '序号',
          label: '序号别名'
        },
        pagination: {
          type: 'object',
          layout: 'inline',
          offset: 0,
          options: {
            enabled: {
              type: 'checkbox',
              title: '显示分页',
              defaultValue: true
            },
            pageSize: {
              when: (v) => v.enabled,
              type: 'select',
              defaultValue: '10',
              options: [
                { label: '5行/页', value: 5 },
                { label: '10行/页', value: 10 },
                { label: '20行/页', value: 20 },
                { label: '50行/页', value: 50 },
                { label: '100行/页', value: 100 }
              ]
            }
          }
        },
        wordWrapEnabled: {
          type: 'checkbox',
          title: '自动换行',
          defaultValue: true
        },
        fixed: {
          type: 'object',
          layout: 'inline',
          offset: 0,
          options: {
            enabled: {
              type: 'checkbox',
              title: '冻结',
              defaultValue: true
            },
            type: {
              when: (v) => v.enabled,
              type: 'select',
              defaultValue: 'ai',
              options: [
                { label: '智能', value: 'ai' },
                { label: '自定义', value: 'custorm' }
              ]
            }
          }
        },
        customFixed: {
          when: (v) => v.fixed.enabled && v.fixed.type === 1,
          type: 'object',
          label: '自定义列',
          layout: 'inline',
          options: {
            left: fixed,
            rigth: {
              ...fixed,
              label: '右起列',
              defaultValue: 0
            }
          }
        },
        filterEnabled: {
          type: 'checkbox',
          title: '开启字段内容筛选',
          defaultValue: false
        }
      }
    },
    summary: {
      label: '总计配置',
      options: {
        enabled: {
          type: 'checkbox',
          title: '显示总计',
          defaultValue: true
        },
        configs: {
          when: (v) => v.enabled,
          type: 'object',
          options: {
            rules: {
              type: 'radio',
              label: '总计方式',
              defaultValue: 'all',
              options: [
                { label: '全部总计', value: 'all' },
                { label: '当页总计', value: 'current' }
              ]
            },
            alias: {
              type: 'input',
              label: '总计别名',
              defaultValue: '合计'
            },
            calculate: {
              type: 'select',
              label: '计算方式',
              defaultValue: 'sum',
              options: [
                { label: 'SUM', value: 'sum' },
                { label: 'AVG', value: 'avg', disabled: true }
              ]
            },
            fontStyle: {
              type: 'object',
              label: '字体样式',
              layout: 'inline',
              offset: 0,
              options: {
                size: {
                  type: 'inputNumber',
                  label: '字号',
                  layout: 'vertical',
                  defaultValue: 12,
                  options: {
                    min: 12
                  }
                },
                color: {
                  type: 'colorPicker',
                  label: '颜色',
                  layout: 'vertical',
                  defaultValue: '#1e2226'
                }
              }
            },
            background: {
              type: 'object',
              layout: 'inline',
              offset: 0,
              options: {
                enabled: {
                  type: 'checkbox',
                  title: '总计背景填充',
                  defaultValue: true
                },
                color: {
                  when: (v) => v.enabled,
                  type: 'colorPicker',
                  defaultValue: '#f5f7fa'
                }
              }
            },
            borderEnabled: {
              type: 'checkbox',
              title: '总计行分割线',
              defaultValue: true
            },
            border: {
              when: (v) => v.borderEnabled,
              type: 'object',
              layout: 'inline',
              options: {
                position: {
                  type: 'select',
                  label: '位置',
                  layout: 'vertical',
                  defaultValue: 'top',
                  options: [
                    { label: '单元格上方', value: 'top' },
                    { label: '单元格下方', value: 'bottom' }
                  ]
                },
                ...borderOptions
              }
            }
          }
        }
      }
    }
  }
}
